<template>
  <div class="order_detail">
    <div class="mask" @click="cancel" v-show="wss"></div>
    <div class="con_pay" v-show="wss">
      <img class="gth" src="../../assets/gth.png" alt />
      <p class="tt1">确认支付</p>
      <p class="tt2">
        <span style="margin-right:.3rem">算力</span>
        <span>1T</span>
      </p>
      <p class="tt3">订单金额：33.53&nbsp;USDT</p>
      <div class="bottom">
        <div class="cancel" @click="cancel">取消</div>
        <div class="pay" @click="pay">确认支付</div>
      </div>
    </div>
    <div class="head">
      <div class="h-head">
        <div class="left" @click="$router.back(-1)">
          <img src="../../assets/left.png" alt />
        </div>
        <div class="center">订单详情</div>
        <div class="right">
          <router-link to>联系客服</router-link>
        </div>
      </div>
    </div>
    <div class="dzf">
      <img src="../../assets/nz.png" alt />
      <p class="ll1">待支付</p>
      <p>
        <span class="ll2">33.53</span>
        <span class="ll3">USDT</span>
      </p>
    </div>
    <div class="zf_xx">
      <p>
        <span class="ll1">等待付款</span>
        <span class="red_wz ll2">请在10分钟内完成</span>
      </p>
      <p>
        <span class="ll1">订单号</span>
        <span class="ll2">122323163751077121</span>
      </p>
      <p>
        <span class="ll1">产品名称</span>
        <span class="ll2">BTC-S15 云算力 即买即挖</span>
      </p>
      <p>
        <span class="ll1">算力周期</span>
        <span class="ll2">永续</span>
      </p>
      <p>
        <span class="ll1">购买数量</span>
        <span class="ll2">1T</span>
      </p>
      <p>
        <span class="ll1">每T功耗</span>
        <span class="ll2">0.085 KW/h</span>
      </p>
      <p>
        <span class="ll1">电费</span>
        <span class="ll2">￥0.38/度</span>
      </p>
      <p>
        <span class="ll1">管理费</span>
        <span class="ll2">6.00%</span>
      </p>
      <p>
        <span class="ll1">下单时间</span>
        <span class="ll2">2019-10-12 11:14:00</span>
      </p>
      <p>
        <span class="ll1">收益日期</span>
        <span class="ll2">2019-10-13</span>
      </p>
      <div class="ljzf" @click="showPopup">立即支付</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      wss: false
    };
  },

  created: function() {},
  mounted() {},
  methods: {
    showPopup() {
      this.wss = true;
    },
    cancel() {
      this.wss = false;
    },
    pay() {
      console.log(1);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.f-flex {
  display: flex;
  display: -webkit-flex;
  align-items: center;
}
.mask {
  background-color: #25262d;
  opacity: 0.4;
  position: fixed;
  width: 100%;
  height: 100%;
}
.con_pay {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 80%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  border-radius: 0.266667rem;
  background: #fff;
  .gth {
    position: absolute;
    top: -0.68rem;
    left: 50%;
    width: 1.36rem;
    height: 1.36rem;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
  }
  .tt1 {
    font-size: 0.48rem;
    color: #474747;
    margin-top: 1.066667rem;
  }
  .tt2 {
    margin-top: 0.106667rem;
    margin-bottom: 0.106667rem;
  }
  .bottom {
    .f-flex();
    font-size: 0.48rem;
    height: 1.333333rem;
    margin-top: 0.266667rem;
    border-top: 1px solid #d6cbcb;
    .cancel {
      height: 100%;
      width: 50%;
      border-right: 1px solid #d6cbcb;
      line-height: 1.333333rem;
    }
    .pay {
      height: 100%;
      width: 50%;
      line-height: 1.333333rem;
      color: #546ce3;
    }
  }
}
.order_detail {
  .head {
    color: #fefeff;
    height: 1.893333rem;
    width: 100%;
    background: url(../../assets/p_bag.png) no-repeat;
    background-size: cover;
    .f-flex();
  }
  .h-head {
    color: #fefeff;
    margin-left: 0.346667rem;
    margin-right: 0.346667rem;
    position: relative;
    width: 100%;
    .f-flex();
    justify-content: space-between;
    .left {
      img {
        width: 0.293333rem;
        height: 0.48rem;
      }
    }
    .center {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      font-size: 0.48rem;
    }
    .right {
      a {
        color: #fff;
      }
    }
  }
  .dzf {
    width: 8.026667rem;
    margin: 0.586667rem auto 0.3rem;
    padding-top: .266667rem;
    padding-bottom: .266667rem;
    background: #fff;
    border-radius: 0.266667rem;
    color: #474747;
    img {
      width: 1.12rem;
      height: 1.12rem;
    }
    .ll1 {
      font-size: 0.48rem;
      margin-top: 0.24rem;
      margin-bottom: 0.26rem;
    }
    .ll2 {
      font-size: 0.48rem;
      margin-right: 0.213333rem;
    }
  }
  .zf_xx {
    background: #fff;
    padding-bottom: 2rem;
    width: 8.026667rem;
    margin: auto;
    border-radius: 0.4rem;
    padding-top: 0.2rem;
    margin-bottom: .266667rem;
    p {
      .f-flex();
      margin-top: 0.4rem;
      .red_wz {
        color: #ff0000;
      }
      .ll1 {
        display: block;
        width: 40%;
        text-align: left;
        margin-left: 1.12rem;
      }
      .ll2 {
        display: block;
        width: 60%;
        text-align: left;
      }
    }
    .ljzf {
      margin: auto;
      margin-top: 0.826667rem;
      width: 5.786667rem;
      height: 0.72rem;
      background: #546ce3;
      font-size: 0.4rem;
      color: #fff;
      border-radius: 0.266667rem;
      text-align: center;
      line-height: 0.72rem;
    }
  }
}
</style>

